<template>
	<!-- 中信建投头部header -->
	<div class="header" :style="{ 'color': headerObj.color }">
		<div class="back" v-if="headerObj.isShowBack" @click="clickBack">
			<van-icon name="arrow-left" class="title-icon" />
		</div>
		<div class="close close-btn" v-if="headerObj.isShowClose" @click="clickClose">
			<van-icon name="cross" class="title-icon" />
		</div>
		<p class="title">
			{{ headerObj.titleText }}
		</p>
		<!-- <div class="mine mine-btn" v-if="headerObj.isShowMine" @click="clickMine">
			<van-icon name="contact" class="title-icon" />
		</div> -->
	</div>
</template>

<script>
export default {
	props: {
		headerObj: {
			type: Object,
			default: ''
		}
	},
	data() {
		return {

		}
	},
	created() {
	},
	methods: {
		clickMine() {
			this.$router.push({
				path: `/${this.$channel}/mine`,
			});
		},
		clickClose() {
			if (window.terminal.isZxjtIos) {
				window.webkit.messageHandlers.closeCurrentWindow.postMessage("");
			} else if(window.terminal.isZxjtAndroid){
				KDS_Native.closeCurrentWindow();
			}else{
				window.history.go(-1)
			}
		},
		clickBack() {
			const curUrl = window.location.href;
			if (curUrl.includes('home')) {
				this.clickClose();
			} else {
				window.history.go(-1)
			}
		}
	}
}
</script>

<style scoped="scoped" lang="less">
.header {
	width: 100%;
	height: 88px;
	background: transparent;
	background: white;
	position: relative;

	.back,
	.close,
	.mine {
		width: 88px;
		height: 88px;
		display: flex;
		justify-content: center;
		align-items: center;		
		position: absolute;
		z-index: 10;
	}

	.close-btn {
		position: absolute;
		top: 0;
		left: 88px;
	}

	.mine-btn {
		top: 0;
		right: 0px;
	}

	.title-icon {
		top: 0;
		left: 0;
		font-size: 38px;
	}

	.title {
		width: 100%;
		font-size: 36px;
		font-weight: 500;
		line-height: 88px;
		text-align: center;
		position: absolute;
		top: 0;
		right: 0px;
		z-index: 5;
	}
}
</style>
